import { useMemo } from "react"
import { useState } from "react"
import UseMemoChild1 from "./UseMemoChild1"

const UseMemoParent = () => {
   const [count1, setCount1 ] = useState(0)
   const [count2, setCount2 ] = useState(0)
    const handleFn1 = () => {
       console.log('我是点击之后触发-执行')
       setCount1(val => val + 1)
    }
    const computedFn2 = useMemo(() => {
        console.log('我是自动执行的...')
      return count2
    }, [count2])
    
    const handleFn2 = () => {
        console.log('我是点击之后触发-执行handleFn2')
        setCount2(val => val + 1)
     }
    return (<div>
    <h3>案例1-useMemo</h3>
    UseMemoParent: 
    count1: {count1}<br/>
    计算属性count2：{computedFn2}
    {
     <button onClick={handleFn1}>点击count1+1</button>
    }
    <button onClick={handleFn2}>更新count2</button>
    {/* 案例2 */}
    <UseMemoChild1 />
    </div>);
}
 
export default UseMemoParent;